<template>
	<view class="container">
		<!--头部卡片-->
		<view class="title">
			<view class="t-text">
				<view class="item1">
					<view class="t-left">
						<view class="imageview">
							<image class="iamges" :src="data.avatar" mode="widthFix"></image>
						</view>
						<view class="">
							<view class="myJF">
								<view class="myJFtext">签到积分</view>
								<view class="myJFNumber">{{Number(data.integral)||''}}</view>
							</view>
							<view class="MYmx" @click="goNav(`/pages/center/integral/integralRecord`)">积分明细</view>
						</view>
					</view>
					<view class="t-right">
						<view class="right-1"></view>
						<!-- <view class="right-2">
							<view class="r-t-1">开启提醒</view>
							<view class="switchView switchF">
								<switch color="#57BE6A" style="transform:scale(0.5)" class="switchZ" @change="switch2Change" />
							</view>
						</view> -->
					</view>
				</view>
			</view>
			<!-- 签到区 -->
			<view class="myCart">
				<view class="Cart-tttle">
					<view class="cart-1">已连签{{data.sign_num||0}}天</view>
					<view class="cart-2">连续签到积分翻倍哦～</view>
					<view class="cart-3" @click="goNav(`/pages/index/home-sign/rolu`)">签到规则</view>
				</view>

				<view class="cart-time" @tap="goCalendar">
					<view class="cart-time-item-box" v-for="(item,index) in data.sign_time_list" :key="index">
						<view class="cart-time-item">
							<view class="item-border today" v-if="index == 0">
								<!-- <image class="gou" src="../../../static/images/mall/1223dfdsf.png" mode=""></image> -->
							</view>
							<view class="item-border" v-else>{{item.integral}}</view>
							<view class="item-texts">{{item.time}}</view>
						</view>
						<view v-if="index != data.sign_time_list.length - 1" class="white-item have-color"></view>
					</view>
				</view>
			</view>

		</view>


		<!-- 任务赚积分 -->
		<view class="mylist">
			<view class="listCar">
				<view class="listCarTitle">做任务赚积分</view>
				<view class="listCarDetails" @tap="nomytap" :class="showCar==true?'listCarDetailShow':''">
					<!-- listCar -->
					<view class="listItem" v-for="(item,index) in data.task_list" :key="index" >
						<view class="listItem-img">
							<image :src="item.image" mode=""></image>
						</view>
						<view class="listItem-text">
							<view class="listItem-text1">{{item.name}}</view>
							<view class="listItem-text2">{{item.desc}}</view>
						</view>
						<!-- 按钮  完成进度，0待完成，1可领取 2已完成-->
						<view :class="item.receive!==2?'listItem-btn':'listItem-Nobtn'" @click="taskClick(item)">{{item.receive?item.receive == 1?'可领取':'已完成':'赚积分'}}</view>
					</view>
					<view v-if="listCarShow==true" :class="listCarShow==true?'showBlock':''">
						<view class="itemWhite"></view>
						<view class="listBtn" @tap="myTap">
							剩余3个任务
							<uni-icons :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
							 class="uni-collapse-cell__title-arrow" color="#bbb" size="20" type="arrowdown" />
						</view>
					</view>

				</view>
			</view>

			<!-- 邀请得奖 -->
			<view class="listCar">
				<view class="listCarTitle">邀请得奖</view>
				<view class="yqClass" v-if="data.invite">
					<view class="myTx">
						<block v-for="(item,index) in data.invite.invite_user" :key="index">
							<!-- <image class="myTxImg" :src="item.avatar?item.avatar:'../../../static/images/index/no_invitation.png'" mode="widthFix"></image> -->
						</block>
						<block v-if="!data.invite.invite_user.length">
							<!-- <image v-for="(item,index) in 5" :key="index" class="myTxImg" src="../../../static/images/index/no_invitation.png" -->
							 mode="widthFix"></image>
						</block>
					</view>
					<view class="myJFClass">
						<view class="myJFText1">{{data.invite.total_integral}}</view>
						<!-- <view class="myJFText2">积分</view> -->
						<view class="myJFText3">{{data.invite.invite_integral}}</view>
						<view class="myJFText4" @click="shareImmediately">立即邀请</view>
					</view>
				</view>
			</view>


			<!-- 抽奖 -->
			<view class="cjClass">
				<scroll-view scroll-x="true">
					<view class="cjBtn">
						<view class="cjBtn1" :class="swiperIndex==1?'cjbtnShow':''" @tap="cjIndex(1)">
							<text>抽奖</text>
							<view v-if="swiperIndex==1" class="showBtnColor"></view>
						</view>
						<view class="cjBtn2" :class="swiperIndex==2?'cjbtnShow':''" @tap="cjIndex(2)">
							<text>兑换</text>
							<view v-if="swiperIndex==2" class="showBtnColor"></view>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 抽奖 -->
			<view :class="swiperIndex==1?'swiper1':'swiper2'">
				<view v-if="swiperIndex==1" class="swiper1">
					<!-- <cjShow></cjShow> -->
					<view class="cjTitle">
						<view class="cjText">剩余免费抽奖次数：<text class="count">{{data.luck_draw_num}}</text>次</view>
						<view class="cjBtns" @click="goNav(`/pages/index/exchange/index?type=0`)">奖品记录</view>
					</view>
						<view class="jifen">积分抽奖：20/次</view>
					<view class="jb1-view">
						<image class="jb1" src="https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-09/1ea9c202009021656428299.png"
						 mode="widthFix"></image>
					</view>
					<view class="jb2-view">
						<image class="jb2" src="https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-09/6c8ee202009021656425455.png"
						 mode="widthFix"></image>
					</view>
					<view class="jb3-view">
						<image class="jb3" src="https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-10/caace202010221058478982.png"
						 mode="widthFix"></image>
					</view>
					<view class="jb4-view">
						<image class="jb4" src="https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-09/1e49b202009021656429747.png"
						 mode="widthFix"></image>
					</view>

					<view class="dzClass">
						<image class="dzClassImg" src="https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-09/5a96620200902165642400.png"
						 mode=""></image>
					</view>
					<view class="cjZP">
						<view class="cjq-3">
							<view class="cjq-2">
								<view class="cjq-1">
									<view class="cj-text" @tap="canStart&&handleDrawStart()">立即抽</view>
									<AlmostLottery :prize-list="prizeList" :prize-index="prizeIndex" @draw-end="drawEnd" @reset-index="prizeIndex = -1"
									 @draw-start="handleDrawStart" v-if="prizeList.length" font-color="#FC5910" />
								</view>
							</view>
						</view>
						<view class="cjzz">
							<image class="cjzzImg" src="https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-09/134b520200902165642218.png"
							 mode=""></image>
						</view>
					</view>
				</view>

				<view v-if="swiperIndex==2" class="swiper2">
					<view class="swiper2-1">
						<view class="swiper2-1tl"></view>
						<view class="swiper2-1tr" @click="goNav(`/pages/index/exchange/index?type=1`)">兑换记录</view>
					</view>
					<block v-for="(item,index) in data.integral_products" :key="index">
						<view class="swiper2-2" @click="exchanges(`/mall/IntegralMall/IntegralProduct?id=${item.id}`)">
							<view class="swiper2-imgDiv">
								<image class="swiper2-img" :src="item.image"></image>
							</view>
							<view class="swiper2-text">
								<view class="swiper2-text1 clamp">{{item.store_name}}</view>
								<view class="swiper2-text2">
									<view class="swiper2-text2-1">{{item.price}}</view>
									<view class="swiper2-text2-2">积分</view>
								</view>
							</view>
							<view class="swiper2-btn">
								<view class="swiper2-btn1">马上兑换</view>
							</view>
						</view>

						<!-- 下边线 -->
						<view v-if="index+1 != data.integral_products.length" class="xbxClass"></view>
					</block>
				</view>
			</view>
			<z-modal ref="zmodal" :content="content" :cancelShow="false" @confirm="popComfirm"></z-modal>
		</view>
	</view>
</template>

<script>
	import {mapMutations,mapState } from 'vuex'

	import wechat from '@/common/wechat.js'
	import uniIcons from '@/components/uni-icons/uni-icons.vue';
	// 抽奖插件地址 https://ext.dcloud.net.cn/plugin?id=1030
	import AlmostLottery from '@/components/almost-lottery/almost-lottery.vue'
	import {
		signUser,
		signLuckDraw,
		usePrize,
		manualIntegral
	} from "@/api/user.js"
	export default {
		data() {
			return {
				data: {}, // 初始化数据
				// canvas 宽高
				canvasData: {
					width: 240,
					height: 240
				},
				canStart: true,
				// 中奖下标
				prizeIndex: -1,
				// 中奖类目名称
				targetName: '',
				content: '',
				// 奖品数据
				prizeList: [],
				swiperIndex: 1,
				showAnimation: true,
				isOpen: false,
				listCarShow: true,
				showCar: false,
				listCar: [{
						title1: "完善个人信息",
						title2: "完善信息即可得20积分哦～",
						title3: "赚积分",
						title3Btn: true
					},
					{
						title1: "收藏喜欢的店铺",
						title2: "最高可得10积分，1个店铺5积分",
						title3: "已完成",
						title3Btn: false
					},
					{
						title1: "完善个人信息",
						title2: "完善信息即可得20积分哦～",
						title3: "赚积分",
						title3Btn: true
					},
					{
						title1: "收藏喜欢的店铺",
						title2: "最高可得10积分，1个店铺5积分",
						title3: "已完成",
						title3Btn: false
					},
					{
						title1: "完善个人信息",
						title2: "完善信息即可得20积分哦～",
						title3: "赚积分",
						title3Btn: true
					}
				],
				prizeId: null, //当前抽取的奖品id
			}
		},
		components: {
			uniIcons,
			AlmostLottery
		},
		created() {
		},
		onShow(){
			this.getSignUser()
		},
		onLoad() {
		},
		computed:{
			...mapState(['signShare']),
		},
		methods: {
			// 马上兑换
			exchanges(item){
				this.goNav(item)
				if(this.data.sign_num<5){
					uni.showToast({
						icon:"none",
						title: `已签到${this.data.sign_num}天，再签到${5-this.data.sign_num}天即可兑换`
					})
				}else{
					this.goNav(item)
				}
			},
			// 任务赚积分
			async taskClick(item) {
				if(item.receive ==2){ //已完成
					return false
				}else if(item.receive ==1){  //可领取
					manualIntegral({task_name:item.task_name}).then(res=>{
						uni.showToast({
							title: "领取成功"
						})
						this.getSignUser()
					})
				}else{
					switch (item.task_name) {
						// 买会员
						case "BuyVip":   
							this.goNav(`/pages/center/vip/vipRights`)
							break;
						case "FirstRecharge":
						//首次充值
							this.goNav(`/pages/center/balance/balanceRecharge?type=signIn`)
							break;
						case "BrowseProducts":
							//浏览商品 
							this.goNav(`/mall/index/indexPage`)
							break;
						case "CollectionShop":
							//收藏店铺 
							this.goNav(`/mall/index/indexPage`)
							break;
						case "PersonalData":
							//完善个人资料 
							this.goNav(`/pages/center/accountSet/accountSet`)
							break;
							
						default:
							console.log("点击其他任务")
					}
				}
				
			},
			// 跳转
			goNav(url) {
				console.log(url, 8880)
				uni.navigateTo({
					url
				})
			},
			// 立即邀请
			shareImmediately() {
				let invite =  this.signShare.invite
				//#ifdef APP-PLUS
				uni.share({
					provider: 'weixin',
					scene: "WXSceneSession",
					type: 0,
					href: invite.url,
					title:invite.title,
					summary: invite.desc,
					imageUrl: invite.image,
					success: ret => {
						console.log(JSON.stringify(ret));
					},
					fail: err => {
						console.log(err, 88898)
					}
				});
				//#endif
				
				//#ifdef H5
				wechat.share(
					invite.title,
					invite.desc,
					invite.url,
					invite.image
				)
				//#endif
			},
			getSignUser() {
				signUser().then(res => {
					this.data = res.data
					this.prizeList = res.data.integral_luck_draw
				})
				
			},
			// 跳转签到日历
			goCalendar() {
				uni.navigateTo({
					url: "./sign-calendar?data=" + encodeURIComponent(JSON.stringify(this.data))
				})
			},
			// 抽奖开始
			handleDrawStart() {
				// if(this.data.luck_draw_num){
					let list = this.prizeList
					this.canStart = false
					signLuckDraw().then(res => {
						list.forEach((item, index) => {
							if (item.ld_id === res.data.ld_id) {
								// 中奖下标
								this.prizeIndex = index
								this.targetName = item.name
								this.prizeId = item.ld_id
								this.content = "恭喜您获得" + this.targetName
								console.log('本次抽中奖品 =>', this.targetName)
							}
						})
					})
				// }else{
				// 	uni.showToast({
				// 		icon:'none',
				// 		title: "暂无抽奖次数"
				// 	})
				// }
			},
			// 抽奖结束
			drawEnd() {
				this.$refs.zmodal.show()
				this.getSignUser()
				this.canStart = true
			},
			// 点击确认
			async popComfirm() {
				if(this.prizeId !== null){
					let res = await usePrize({
						id: this.prizeId
					})
				}
			},
			switch2Change(e) {

			},
			myTap() {
				if (this.showCar == false) {
					this.showCar = true;
					this.listCarShow = false;
				} else {
					this.showCar = false;
					this.listCarShow = true;
				}
			},
			nomytap() {
				// if(this.showCar == true){
				// 	this.showCar = false;
				// 	this.listCarShow = true;
				// }
			},
			cjIndex(e) {
				this.swiperIndex = e;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: 70rpx;
	}

	.title {
		width: 750rpx;
		height: 302rpx;
		background: #333333;
	}

	.t-text {
		width: 750rpx;
		height: 150rpx;
		border: 1rpx solid #333333;
	}

	.item1 {
		width: 690rpx;
		height: 88rpx;
		margin: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.imageview {
		padding-top: 6rpx;
	}

	.imageview,
	.iamges {
		width: 88rpx;
		height: 88rpx;
		border-radius: 44rpx;
	}

	.myJF {
		margin-left: 20rpx;
		display: flex;
		justify-content: start
	}

	.t-left {
		display: flex;
	}

	.myJFtext {
		width: 96rpx;
		height: 23rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.myJFNumber {
		margin-top: -12rpx;
		margin-left: 16rpx;
		font-size: 40rpx;
		font-family: DIN Alternate;
		font-weight: bold;
		color: #FFFFFF;

	}

	.MYmx {
		margin-top: 6rpx;
		margin-left: 19rpx;
		width: 140rpx;
		height: 44rpx;
		border: 2rpx solid #FFFFFF;
		border-radius: 22rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 44rpx;
	}

	.right-1,
	.right-2 {
		width: 200rpx;
		/* 169 */
		height: 44rpx;
	}

	.right-2 {
		display: flex;
	}

	.r-t-1 {
		width: 96rpx;
		height: 23rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 0.8;
		text-align: center;
		margin-right: 17rpx;
	}

	.switchView {
		width: 60rpx;
		height: 32rpx;
	}

	.switchF {
		position: relative;
	}

	.switchZ {
		position: absolute;
		top: -15rpx;
		left: -27rpx;
	}

	.myCart {
		width: 690rpx;
		height: 240rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto;
		box-shadow: 0rpx 8rpx 2rpx #DDDDDD;
	}

	.Cart-tttle {
		display: flex;
		width: 630rpx;
		height: 48rpx;
		margin: 0 auto;
		padding-top: 34rpx;
		padding-bottom: 34rpx;
	}

	.cart-1 {
		padding: 0 20rpx;
		height: 48rpx;
		border: 2rpx solid #F4B53C;
		border-radius: 24rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #F3B233;
		text-align: center;
		line-height: 48rpx;
		white-space: nowrap;
	}

	.cart-2 {
		width: 237rpx;
		height: 48rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #AAAAAA;
		text-align: center;
		line-height: 48rpx;
		margin-left: 20rpx;
		white-space: nowrap;
	}

	.cart-3 {
		width: 101rpx;
		height: 48rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #666666;
		text-align: center;
		line-height: 48rpx;
		white-space: nowrap;
		margin-left: 110rpx;
	}

	.cart-time {
		width: 630rpx;
		height: 92rpx;
		margin: 0rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.cart-time-item-box {
		display: flex;
	}

	.cart-time-item {
		width: 60rpx;
		height: 92rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.item-border {
		width: 60rpx;
		height: 60rpx;
		background: linear-gradient(0deg, #F1A718 0%, #F9D184 100%);
		border-radius: 50%;
		color: #fff;
		font-weight: bold;
		font-size: 26rpx;
		text-align: center;
		line-height: 60rpx;
	}

	.today {
		position: relative;

		.gou {
			position: absolute;
			left: 10rpx;
			top: 10rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}

	.item-texts {
		margin-left: -10rpx;
		height: 28rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #DDDDDD;
	}

	.white-item {
		width: 34rpx;
		height: 2rpx;
		background: #F9DEAA;
		margin-top: 30rpx;
	}

	.have-color {
		background: #F9DEAA;
	}

	.no-color {
		background: #EEEEEE;
	}

	.mylist {
		margin-top: 174rpx;
	}

	.listCar {
		margin-top: 49rpx;
		margin-left: 30rpx;
		margin-right: 29rpx;
	}

	.listCarTitle {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.listCarDetails {
		margin-top: 30rpx;
		width: 690rpx;
		height: 360rpx;
		background: #FFFFFF;
		border: 1rpx solid #EFEFEF;
		border-radius: 20rpx;
		transition: height 0.7s;
		overflow: hidden;
		position: relative;
	}

	.listCarDetailShow {
		height: 640rpx !important;
		padding-bottom: 30rpx;
	}

	.listItem {
		display: flex;
		width: 620rpx;
		// height: 80rpx;
		margin-left: 30rpx;
		margin-right: 40rpx;
		margin-top: 40rpx;
	}

	.listItem-img {
		width: 80rpx;
		height: 80rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}

	.listItem-text {
		width: 400rpx;
		// height: 80rpx;
	}

	.listItem-text1 {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		white-space: nowrap;
		margin-left: 23rpx;
	}

	.listItem-text2 {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-left: 23rpx;
		white-space: nowrap;
		margin-top: 8rpx;
		max-width: 350rpx;
		white-space: normal;
		word-break: break-all;
		overflow: hidden;
		white-space: normal;
		word-break: break-all;
	}

	.listItem-btn {
		width: 140rpx;
		height: 54rpx;
		background: #FDB434;
		border-radius: 27rpx;
		margin-top: 10rpx;
		text-align: center;
		line-height: 54rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.listItem-Nobtn {
		width: 140rpx;
		height: 54rpx;
		margin-top: 10rpx;
		text-align: center;
		line-height: 54rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #BBBBBB;
	}

	.itemWhite {
		width: 618rpx;
		height: 1rpx;
		background: #EFEFEF;
		margin-left: 32rpx;
		margin-right: 40rpx;
		margin-top: 27rpx;
	}

	.listBtn {
		width: 100%;
		height: 26rpx;
		text-align: center;
		line-height: 26rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		margin: 33rpx 0;
	}

	.uni-collapse-cell__title-arrow-active {
		transform: rotate(180deg);
	}

	.uni-collapse-cell--animation {
		// transition: transform 0.3s ease;
		transition-property: transform;
		transition-duration: 0.3s;
		transition-timing-function: ease;
	}

	.uni-collapse-cell__title-arrow {
		width: 20px;
		height: 20px;
		transform: rotate(0deg);
		transform-origin: center center;
	}

	.showBlock {
		background-color: white;
		position: absolute;
		bottom: 0rpx;
	}

	.yqClass {
		width: 690rpx;
		height: 240rpx;
		background: #FFFFFF;
		border: 1rpx solid #EFEFEF;
		border-radius: 20rpx;
		margin-top: 30rpx;
	}

	.myTx {
		width: 650rpx;
		height: 80rpx;
		margin-top: 40rpx;
		margin-bottom: 27rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.myTxImg {
		width: 80rpx;
		height: 80rpx;
		margin: 0rpx 10rpx;
	}

	.myJFClass {
		width: 619rpx;
		height: 54rpx;
		margin-left: 31rpx;
		margin-right: 40rpx;
		display: flex;
		position: relative;
	}

	.myJFText1 {
		font-size: 40rpx;
		font-family: DIN Alternate;
		font-weight: bold;
		color: #FA6E25;
		line-height: 54rpx;
	}

	.myJFText2 {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FA6E25;
		margin-left: 6rpx;
		line-height: 60rpx;
	}

	.myJFText3 {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-left: 34rpx;
		line-height: 60rpx;
	}

	.myJFText4 {
		width: 160rpx;
		height: 54rpx;
		background: linear-gradient(-37deg, #FB7440 0%, #F3933B 100%);
		border-radius: 27rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 54rpx;
		position: absolute;
		right: 0rpx;
	}

	.cjClass {
		height: 125rpx;
		width: 690rpx;
	}

	.cjBtn {
		width: 288rpx;
		height: 125rpx;
		margin: 0rpx auto;
		display: flex;
		justify-content: space-around;
	}

	.cjBtn1,
	.cjBtn2 {
		line-height: 125rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		position: relative;
	}

	.swiper1 {
		width: 690rpx;
		height: 700rpx;
		border: 1rpx solid red;
		margin: 0rpx auto;
		border: 1rpx solid #EFEFEF;
		background: linear-gradient(0deg, #FB7440 0%, #F3933B 100%);
		border-radius: 20rpx;
		position: relative;
	}

	.cjbtnShow {
		font-size: 32rpx !important;
		font-family: PingFang SC;
		font-weight: 500 !important;
		color: #333333;

	}

	.swiper2 {
		width: 690rpx;
		height: 660rpx;
		border: 1rpx solid blue;
		margin: 0rpx auto;
		background: #FFFFFF;
		border: 1rpx solid #EFEFEF;
		border-radius: 20rpx;
	}

	.swiper2-1 {
		width: 623rpx;
		height: 50rpx;
		display: flex;
		justify-content: space-between;
		margin-left: 33rpx;
		margin-right: 44rpx;
		margin-top: 28rpx;
	}

	.swiper2-1tl {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 50rpx;
	}

	.swiper2-1tr {
		width: 140rpx;
		height: 50rpx;
		border: 2rpx solid #FDB434;
		opacity: 0.8;
		border-radius: 25rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FDB434;
	}

	.swiper2-2 {
		width: 622rpx;
		height: 128rpx;
		display: flex;
		margin: 30rpx 38rpx 30rpx 30rpx;
	}

	.swiper2-img,
	.swiper2-imgDiv {
		max-width: 200rpx;
		width: 200rpx;
		height: 128rpx;
	}

	.swiper2-text {
		max-width: 230rpx;
		width: 230rpx;
		height: 128rpx;
		margin-left: 32rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.swiper2-text1 {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-top: 12rpx;
		white-space: nowrap;
	}

	.swiper2-text2 {
		display: flex;
		height: 26rpx;
		margin-bottom: 13rpx;
	}

	.swiper2-text2-1 {
		font-size: 36rpx;
		font-family: DIN Alternate;
		font-weight: bold;
		color: #FA6E25;
	}

	.swiper2-text2-2 {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FA6E25;
		margin-left: 5rpx;
		margin-top: 3rpx;
		line-height: 50rpx;
	}

	.swiper2-btn {
		max-width: 160rpx;
		width: 160rpx;
		height: 128rpx;
		display: flex;
		flex-direction: column;
		justify-content: end;
	}

	.swiper2-btn1 {
		width: 160rpx;
		height: 54rpx;
		background: #FDB434;
		border-radius: 27rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 54rpx;
		margin-top: 69rpx;
	}

	.xbxClass {
		width: 628rpx;
		height: 1rpx;
		background: #EFEFEF;
		margin: 0rpx 31rpx;
	}

	.showBtnColor {
		width: 110%;
		height: 10rpx;
		background: linear-gradient(265deg, #FB7440 0%, #F3933B 100%);
		border-radius: 5rpx;
		position: absolute;
		top: 75rpx;
		left: -5rpx;
		z-index: -1;
	}

	.cjTitle {
		width: 620rpx;
		height: 50rpx;
		margin-left: 40rpx;
		margin-right: 30rpx;
		margin-top: 38rpx;
		display: flex;
		justify-content: space-between;
	}
	.jifen{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 50rpx;
		padding-left: 40rpx;
		}

	.cjText {
		height: 50rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 50rpx;

		.count {
			font-size: 30rpx;
			font-weight: bold;
		}
	}

	.cjBtns {
		width: 140rpx;
		height: 50rpx;
		border: 2rpx solid #FFFFFF;
		opacity: 0.8;
		border-radius: 25rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 50rpx;
		text-align: center;
	}

	.jb1,
	.jb1-view {
		width: 79rpx;
		height: 61rpx;
	}

	.jb1-view {
		position: absolute;
		top: 213rpx;
		left: 49rpx;
	}

	.jb2,
	.jb2-view {
		width: 44rpx;
		height: 53rpx;
	}

	.jb2-view {
		position: absolute;
		top: 447rpx;
		left: 48rpx;
	}

	.jb3,
	.jb3-view {
		width: 56rpx;
		height: 69rpx;
	}

	.jb3-view {
		position: absolute;
		top: 182rpx;
		right: 69rpx;
	}

	.jb4,
	.jb4-view {
		width: 49rpx;
		height: 38rpx;
	}

	.jb4-view {
		position: absolute;
		top: 481rpx;
		right: 45rpx;
	}

	.dzClassImg,
	.dzClass {
		width: 665rpx;
		height: 121rpx;
	}

	.dzClass {
		position: absolute;
		bottom: 63rpx;
		left: 12rpx;
		right: 13rpx;
		z-index: 10;
	}



	.cjq-1 {
		width: 415rpx;
		height: 415rpx;
		position: absolute;
		top: 5rpx;
		padding-top: 10rpx;
		border-radius: 50%;
		background-color: #e34f01;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.cjq-2 {
		width: 435rpx;
		height: 435rpx;
		top: 10rpx;
		position: absolute;
		border-radius: 50%;
		background-color: #FDD6DF;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.cjq-3 {
		width: 455rpx;
		height: 455rpx;
		position: absolute;
		border-radius: 50%;
		background-color: #ef5200;
		display: flex;
		flex-direction: column;
		align-items: center;
	}



	.cjZP {
		width: 482rpx;
		height: 400rpx;
		border-image: linear-gradient(0deg, #E63E3F, #FFFFFF) 10 10;
		position: absolute;
		top: 175rpx;
		left: 106rpx;
		right: 102rpx;
		bottom: 43rpx;
		z-index: 11;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.cjzz {
		position: absolute;
		top: 150rpx;
		/* 75 */
		left: 220rpx;
		/* 110 */
		z-index: 1;
	}

	.cjzz,
	.cjzzImg {
		width: 55rpx;
		height: 104rpx;
	}

	.cj-text {
		position: absolute;
		z-index: 111;
		top: 197rpx;
		left: 170rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFF9E6;
	}
</style>
